<template>
<div id="sidebar">
  <!-- {{ childMenuActive }} <br> {{ childMenu }} <br> {{ timestamp }} -->
  <Menu :active-name="childMenuActive" :key="timestamp" @on-select="handleChildMenuSelect">
    <MenuItem :name="item.path" v-for="(item, key) in childMenu" :key="key">{{ item.name }}</MenuItem>
  </Menu>
</div>
</template>
<script>
import {
  mapGetters
} from 'vuex'

export default {
  name: 'sidebar',
  computed: {
    ...mapGetters({
      childMenu: 'getChildMenu',
      childMenuActive: 'getChildMenuActive',
      timestamp: 'getTimestamp'
    })
  },
  methods: {
    handleChildMenuSelect(name) {
      this.$store.commit('SET_TIMESTAMP') // 设置组件 key 值(时间戳)
      this.$store.commit('CHILD_MENU_SELECT', name)
    }
  }
}
</script>
<style lang="scss" scoped>
#sidebar {
    float: left;
    overflow: auto;
    width: 240px;
    height: calc(100vh - 60px);
    background-color: #efeff1;
    .ivu-menu-vertical {
        background-color: #efeff1;
        &::after {
            display: none;
        }
    }
}
</style>
